
<template>
  <div class="common-layout">
    <el-container class = "wapper">
      <el-aside width="200px">
        <navView @select="handleSelect"></navView>
      </el-aside>
      <el-container>
        <el-header>
          <h1>商品管理平台</h1>
        </el-header>
        <el-main class="main">
            <LiteratureView v-if="activeIndex === '1-1'"></LiteratureView>
            <Science v-if="activeIndex === '1-2'"></Science>
            <ArtCategory v-if="activeIndex === '1-3'"></ArtCategory>
            <Society v-if="activeIndex === '1-4'"></Society>
            <Other v-if="activeIndex === '1-5'"></Other>
            <InventoryView v-if="activeIndex === '2'"></InventoryView>
            <BorrowView v-if="activeIndex === '3'"></BorrowView>
            <Setting v-if="activeIndex === '4'"></Setting>
        </el-main>
        <el-footer>管理员</el-footer>
      </el-container>
    </el-container>
  </div>
</template>


<script lang="ts">
export default {
  name: 'home',
}
</script>

<script lang="ts" setup>
import navView from '../views/nav.vue'
import LiteratureView from '../components/booksClass/Literature.vue';
import Science from '../components/booksClass/Science.vue';
import ArtCategory from '../components/booksClass/ArtCategory.vue';
import Society from '../components/booksClass/Society.vue';
import Other from '../components/booksClass/Other.vue';
import InventoryView from '../components/Inventory.vue'
import BorrowView from '../components/Borrow.vue';
import Setting from '../components/Setting.vue';
import { ref, type Ref } from 'vue';

const activeIndex = ref('2')
// 接收子组件nav传过来的的参数index
const handleSelect = (index: Ref<string>) => {
    activeIndex.value = index.value
    console.log(index.value);
}

</script>

<style scoped lang="scss">
.home {
    background-color: #dfd8d8;
    width: 100%;
    height: 100%;
}
.common-layout {
    background-color: #f5f5f5;
    width: 100%;
    height: 100%;
}
.wapper {
    width: 100%;
    height: 100%;
}
.el-aside {
    background-color: #cfcece;
    height: 100%;
    background-image: url('../assets/images/picture1.jpg');
}
.el-header {
    background-color: #409eff;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    text-align: center;
    font-size: 25px;
    color: rgb(14, 177, 226);
    font-weight: bold;
    // 图片定位
    background: url('../assets/images/picture1.jpg') 100% 55%;
}
.el-footer {
    background-color: #409eff;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.08);
    text-align: center;
    background: url('../assets/images/picture2.jpg') 50% 95%;
}
.main {
    padding: 20px;
    background-color: #c8bcc2;
}
</style>
